<template>
  <div class="about-page">
    <top-header>
      <div slot="nav-left">
        <a href="#/login" class="nav-left">
          <img style="height: 44px;display: inline-table;margin-top: -3px;" src="../../assets/img/esin.png" alt="易信">
          <span class="newLogo-right">商家中心</span>
        </a>
      </div>
      <div slot="nav-right">
        <ul class="nav">
          <li index="0" @click="handleToPage('login')">首页</li>
          <li index="1" @click="handleToPage('about')">联系我们</li>
          <li index="4" @click="handleToPage('problem')">常见问题</li>
        </ul>
      </div>
    </top-header>
    <div class="container">
      <div class="problems-container-img">
        <img src="http://oss.qlan99.com/20201117/7bde220e2af34959bdee09471b051961.png" style="width:100%" />
      </div>
      <div class="problems-container">
        <div class="hugo-problem-item" v-for="problem in dataList" :key="problem.id">
          <div class="hugo-problem-item-id">{{problem.code}}</div>
          <div class="hugo-problem-item-right">
            <div class="hugo-problem-item-right-title">{{problem.name}}</div>
            <div class="hugo-problem-item-right-context">
              <div v-html="problem.content"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-session__body">
        <div class="flex-box__item">
          <div class="hd">微信小程序</div>
          <div class="bd">
            <img style="height: 144px;" src="../../assets/img/hello.png" />
          </div>
          <div class="ft">
            <p>搜索“易信小程序”或</p>
            <p>扫描的二维码</p>
          </div>
        </div>
        <div class="flex-box__item">
          <div class="hd">微信公众平台</div>
          <div class="bd">
            <img style="height: 144px;" src="../../assets/img/hello.png" />
          </div>
          <div class="ft">
            <p>搜索“易信公众号”或</p>
            <p>扫描的二维码</p>
          </div>
        </div>
        <div class="flex-box__item">
          <div class="hd color-bg__blue">服务热线：{{this.sysData.companyPhone}}</div>
          <div class="flex-box__server">
            <div class="item">
              <p>客服</p>
              <a type="primary">kefu@xxx.com</a>
            </div>
            <div class="item">
              <p>商家入驻</p>
              <a type="primary">shangjiaruzhu@xxx.com</a>
            </div>
            <div class="item">
              <p>商务合作</p>
              <a type="primary">shangwuhezuo@xxx.com</a>
            </div>
            <!-- <div class="item">
              <p>商服邮箱</p>
              <a type="primary">{{sysData.companyEmail}}</a>
            </div> -->
          </div>
        </div>
      </div>
      <div class="footer-links">
        <div class="outside">
          友情链接
          <div class="triangle"></div>
        </div>
        <div class="show-links">
          <a
            type="info"
            :href="link.url"
            v-for="link in linkList"
            :key="link.id"
            target="_blank"
          >{{link.name}}</a>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import { treeDataTranslate } from "@/utils";
import Footer from "./footer";
export default {
  data() {
    return {
      activeId: "",
      sysData: {},
      dataList: [],
      pageIndex: 1,
      pageSize: 10000,
      totalPage: 0,
      dataForm: {
        key: ""
      },
      banners: [],
      linkList: []
    };
  },
  components: {
    Footer
  },
  created() {
    this.getDataList();
    this.getSysData();
    this.getLinkList();
  },
  methods: {
    // 获取数据列表
    getDataList() {
      this.$http({
        url: this.$http.adornUrl("/hotel/hotelproblem/portalList"),
        method: "get",
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          key: this.dataForm.key
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list;
          this.totalPage = 100000;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
      });
    },
    // 获取友情链接列表
    getLinkList() {
      this.$http({
        url: this.$http.adornUrl("/hotel/hotelfriendlink/portalList"),
        method: "get",
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          key: this.dataForm.key
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.linkList = data.page.list;
          //console.log(this.linkList);
          this.totalPage = 1000000;
        } else {
          this.linkList = [];
          this.totalPage = 0;
        }
      });
    },
    getSysData() {
      this.$http({
        url: this.$http.adornUrl("/hotel/hotelsystem/info"),
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.sysData = data.hotelSystem;
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    handleToPage(name) {
      this.$router.push({ name });
    },
    openWindow(url) {
      console.log(url);
      window.open(url);
    }
  }
};
</script>
<style lang="scss" scoped>
.footer-links {
  padding: 20px;
  background-color: #f9f9f9;
  margin-bottom: 25px;
  overflow: auto;
  .outside {
    width: 100px;
    height: 40px;
    background-color: #6697d5;
    /*相对位置*/
    position: relative;
    color: white;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    float: left;
    .triangle {
      width: 0;
      height: 0;
      border: 8px solid #6697d5;
      border-left: 30px solid #6697d5;
      position: absolute;
      top: 13px;
      left: 100px;
      border-right: none;
      border-top-color: transparent;
      border-bottom-color: transparent;
    }
  }
  .show-links {
    padding: 15px;
    margin-left: 130px;
    a {
      color: gray !important;
      /* margin: 10px; */
      margin-left: 10px !important;
      margin-right: 15px !important;
      font-size: 15px !important;
    }
  }
}

.problems-container {
  width: 100%;
  padding-top: 15px;
  padding-left: 28px;
  .hugo-problem-item {
    padding: 15px;
    width: inherit;
    border-bottom: 1px dashed #768a8f;
    overflow: auto;
    .hugo-problem-item-id {
      height: 60px;
      width: 60px;
      background-color: #5fb878;
      color: #ffffff;
      border-radius: 500%;
      line-height: 60px;
      font-size: 32px;
      text-align: center;
      float: left;
    }
    .hugo-problem-item-right {
      margin-left: 100px;
      margin-top: 6px;
      .hugo-problem-item-right-title {
        font-size: 20px;
        font-weight: 600;
      }
      .hugo-problem-item-right-context {
        margin-top: 8px;
      }
    }
  }
}
.problems-container-img {
  width: 100%;
  height: 248px;
}
.container-head {
  position: relative;
  .problems-container-img {
    width: 100%;
    height: 248px;
  }
  .container-head-text {
    position: absolute;
    width: 100%;
    height: 48px;
    padding-left: 160px;
    line-height: 48px;
    color: white;
    background-color: rgba(139, 138, 143, 0.4);
    font-size: 23px;
    margin-top: -48px;
    z-index: 99999;
  }
}

.container {
  width: 1200px;
  margin: 0 auto;
}
.sec-help {
  overflow: hidden;
  .titles {
    width: 100%;
    float: left;
    text-align: center;
    margin: 40px 0px 20px 0px;
    h1 {
      font-size: 26px;
      color: #777;
      border-bottom: #ddd solid 2px;
      width: 400px;
      margin: 0 auto;
      padding-bottom: 10px;
      font-weight: lighter;
      position: relative;
      em {
        display: block;
        width: 120px;
        height: 4px;
        position: absolute;
        left: 140px;
        bottom: -3px;
        background: #00b0ed;
      }
    }
    h2 {
      font-size: 20px;
      width: 400px;
      margin: 0 auto;
      color: #999;
      font-weight: lighter;
      padding-top: 5px;
      font {
        color: #00b0ed;
      }
    }
  }
}
.bottom-session__body {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: 20px 0;
  .flex-box__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;

    .bd {
      margin: 15px 0;
      border: 1px solid #eeeeee;
      padding: 8px;
    }

    &:not(:first-child) {
      border-left: 1px solid #eeeeee;
    }

    .ft {
      text-align: center;
    }

    .color-bg__blue {
      width: 85%;
      margin: 0 auto;
      margin-bottom: 15px;
      height: 40px;
      border-left: 1px solid #ddd;
      line-height: 40px;
      font-size: 20px;
      color: #fff;
      text-align: center;
      background-color: #288fe7;
    }

    .flex-box__server {
      width: 85%;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;

      .item {
        width: 50%;
      }
    }
  }
}
.main-container {
  width: 1200px;
  margin: 60px auto;

  .main-content {
    color: #ffffff;
    margin-left: 30px;
    min-height: 300px;
    border-radius: 20px;
    padding: 40px 20px;
    background-color: #03afeb;
  }

  .aside-box {
    background-color: #03afeb;
    .menu-item__box {
      .menu-item__title {
        cursor: pointer;
        padding: 0 20px;
        color: #ffffff;
        height: 45px;
        line-height: 45px;
        border-bottom: 1px solid #ffffff;
      }
      .menu-txt {
        margin-left: 8px;
      }

      .nav-box {
        list-style: none;
        padding: 0;
        margin: 0;
        &__item {
          cursor: pointer;
          list-style: none;
          height: 40px;
          display: flex;
          align-items: center;
          padding: 0 25px;
          color: #ffffff;
          background-color: rgba(163, 163, 163, 1);
          transition: background-color ease-in 0.1s;

          &:not(:last-of-type) {
            border-bottom: 1px solid #ffffff;
          }
          &.active {
            background-color: rgba(188, 188, 188, 1);
          }
          &:hover {
            background-color: rgba(188, 188, 188, 1);
          }
        }
      }
    }
  }
}
</style>
